<template>
    <div>
        <el-alert :closable="false" :show-icon="true" type="success">
            <div>
                数据获取时间: {{ datetime }},
                共追踪到 {{ dataSource?.length }} 条近期HTTP请求记录
                <a style="position: absolute; right: 35px; cursor: pointer" @click="onRefresh">点击刷新</a>
            </div>
        </el-alert>
        <el-table ref="dataTableRef" :data="dataSource" border>
            <el-table-column align="center" header-align="center" label="序号" width="100">
                <template #default="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column align="left" header-align="center" label="请求时间" prop="timestamp" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="请求方法" prop="request.method" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.request.method === 'GET'" size="small" type="success">{{ scope.row.request.method }}</el-tag>
                    <el-tag v-else-if="scope.row.request.method === 'POST'" size="small" type="info">{{ scope.row.request.method }}</el-tag>
                    <el-tag v-else-if="scope.row.request.method === 'PUT'" size="small" type="warning">{{ scope.row.request.method }}</el-tag>
                    <el-tag v-else-if="scope.row.request.method === 'DELETE'" size="small" type="danger">{{ scope.row.request.method }}</el-tag>
                    <el-tag v-else>{{ scope.row.request.method }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column header-align="center" label="请求URL" prop="request.uri"></el-table-column>
            <el-table-column align="center" header-align="center" label="响应状态" prop="response.status" width="180">
                <template #default="scope">
                    <el-tag v-if="scope.row.response.status === 200" size="small" type="success">{{ scope.row.response.status }}</el-tag>
                    <el-tag v-else size="small" type="danger">{{ scope.row.response.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" label="请求耗时(毫秒)" prop="timeTaken" width="150">
                <template #default="scope">
                    <el-tag v-if="scope.row.timeTaken < 500" size="small" type="success">{{ scope.row.timeTaken }}</el-tag>
                    <el-tag v-else-if="scope.row.timeTaken < 1000" size="small" type="info">{{ scope.row.timeTaken }}</el-tag>
                    <el-tag v-else-if="scope.row.timeTaken < 1500" size="small" type="warning">{{ scope.row.timeTaken }}</el-tag>
                    <el-tag v-else size="small" type="danger">{{ scope.row.timeTaken }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {defineComponent, onMounted, ref} from "vue";
import {env, service} from "@/utils";

export default defineComponent({
    setup() {
        const dataTableRef = ref();
        const datetime = ref();
        const dataSource = ref([]);

        const onRefresh = () => {
            let date = new Date()
            datetime.value = date.getFullYear() + '年' + date.getMonth() + '月' + date.getDay() + '日' +
                    date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒'
            if (env.APP_VERSION === '3.0.0') {
                service.get('actuator/tracing').then((rs) => {
                    let filterData = []
                    let _index = 0
                    for (let d of rs.exchanges) {
                        if (d.request.method !== 'OPTIONS' &&
                                d.request.uri.indexOf('tracing') === -1) {
                            d.index = _index
                            filterData.push(d)
                            _index++
                        }
                    }
                    dataSource.value = filterData;
                })
            } else {
                service.get('actuator/httptrace').then((rs) => {
                    let filterData = []
                    let _index = 0
                    for (let d of rs.traces) {
                        if (d.request.method !== 'OPTIONS' &&
                                d.request.uri.indexOf('httptrace') === -1) {
                            d.index = _index
                            filterData.push(d)
                            _index++
                        }
                    }
                    dataSource.value = filterData;
                })
            }
        }

        onMounted(() => onRefresh())

        return {
            dataTableRef, datetime, dataSource,
            onRefresh
        };
    }
});
</script>
